<template>
	<view class="incomeDetail" @click="changeInputFocusStatus()" :class="{ skelett: isSkelett }">
		<view class="incomeDetail-header">
			<view class="incomeDetail-header-info">
				<image class="incomeDetail-header-info-icon" src="@/static/images/income/icon_sqmx_search.png" />

				<input
					hold-keyboard
					confirm-type="search"
					placeholder="请输入关键字搜索"
					class="incomeDetail-header-info-input"
					placeholder-class="incomeDetail-header-info-input-placeholder"
					v-model="searchKey"
					:focus="inputFocusStatus"
					@confirm="confirm"
					@blur="changeInputFocusStatus()"
					@click.prevent.capture.stop="changeInputFocusStatus(true)"
				/>
				<image
					v-show="isInputClear"
					@click.prevent.stop="clearSearchKey"
					class="incomeDetail-header-info-clear"
					src="@/static/images/income/icon_sqtx_close.png"
				/>
			</view>

			<view class="incomeDetail-header-cancel" @click.stop="clickCancel" :class="{ isShow: cancelButtonShow }">
				<text>取消</text>
			</view>
		</view>

		<scroll-view scroll-y class="scroll-view" :style="[mainHeightStyle]" @scrolltolower="scrolltolower">
			<view class="incomeDetail-main">
				<view class="incomeDetail-main-item" v-for="item in formatIncomeData" :key="item.incomeTime">
					<view class="incomeDetail-main-item-info">
						<view class="incomeDetail-main-item-info-name">
							<text>{{ item.productName }}</text>
						</view>

						<view class="incomeDetail-main-item-info-time">
							<text>{{ item.incomeTime }}</text>
						</view>
						<view class="incomeDetail-main-item-info-type">
							<text>收益类型：{{ item.typeDesc }}</text>
						</view>
					</view>

					<view class="incomeDetail-main-item-money">
						<view class="incomeDetail-main-item-money-icon" v-if="!isSkelett">¥</view>
						<view class="incomeDetail-main-item-money-num">{{ item.incomeYuan }}</view>
					</view>
				</view>
				<DistributionHint :fixed="isHintFixed" :type="isHintStatus" :hintLabel="hintLabel" :hintImage="hintImage" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { defaultImageUrl, getSystemInfo } from '@/utils';
import { getIncomeDetails } from '@/api/my';

import DistributionHint from '@/components/distributionHint';
const { windowHeight } = getSystemInfo();
const noDataText = Object.freeze({
	noData: '暂时没有收益哦～',
	searchNoData: '没有搜索到相关收益哦～'
});
const imgNomoney = Object.freeze(`${defaultImageUrl}image/img_nomoney.png`);

export default {
	name: 'IncomeDetail',

	data() {
		return {
			searchKey: '',
			incomeData: [{}, {}, {}, {}],
			isSkelett: true,
			inputFocusStatus: false,

			isHintStatus: '', // nodata
			requestParams: {
				pageIndex: 1,
				pageSize: 10
			}
		};
	},

	computed: {
		cancelButtonShow() {
			const { searchKey, inputFocusStatus } = this;
			return searchKey.length || inputFocusStatus;
		},

		isInputClear() {
			const { searchKey, inputFocusStatus } = this;

			return inputFocusStatus && searchKey.length;
		},

		isHintFixed() {
			const { isHintStatus } = this;

			return isHintStatus === 'nodata';
		},

		hintImage() {
			const { isHintFixed } = this;

			return isHintFixed ? imgNomoney : undefined;
		},

		hintLabel() {
			const { searchKey, isHintFixed } = this;

			if (!isHintFixed) {
				return '';
			}

			return noDataText[searchKey.replace(/\s/g, '') ? 'searchNoData' : 'noData'];
		},

		mainHeightStyle() {
			const height = `${windowHeight - uni.upx2px(112)}px`;
			return { height };
		},

		formatIncomeData() {
			const { incomeData, isSkelett } = this;

			if (isSkelett) {
				return Array.from({ length: 4 }).map(() => ({}));
			}

			return incomeData;
		}
	},

	created() {
		this.getCurrentPageData();
	},

	methods: {
		confirm(params) {
			const { searchKey } = this;
			const formatSearchKsy = searchKey.trim();

			this.searchKey = formatSearchKsy;
			this.getCurrentPageData(1);
		},

		getCurrentPageData(pageIndex = this.requestParams.pageIndex) {
			const {
				searchKey,
				requestParams: { pageSize }
			} = this;

			const params = {
				pageIndex,
				pageSize,
				searchKey
			};

			const isPageIndex = pageIndex === 1;

			isPageIndex &&
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});

			getIncomeDetails(params).then((res) => {
				const { code, data } = res;

				if (code !== 200) {
					return;
				}

				const { records = [] } = data || {};

				this.isSkelett = false;
				this.requestParams.pageIndex = pageIndex;
				this.incomeData = isPageIndex ? records : [...this.incomeData, ...records];
				this.isHintStatus = isPageIndex && !records.length ? 'nodata' : records.length < pageSize ? 'nomore' : '';
			});
		},

		changeInputFocusStatus(status = false) {
			if (!status) {
				uni.hideKeyboard();
			}

			this.inputFocusStatus = status;
		},

		clearSearchKey() {
			this.searchKey = '';
			this.changeInputFocusStatus(true);
		},

		clickCancel() {
			this.searchKey = '';
			this.changeInputFocusStatus(false);

			this.getCurrentPageData(1);
		},

		scrolltolower() {
			const {
				isHintStatus,
				requestParams: { pageIndex }
			} = this;

			if (isHintStatus) {
				return;
			}

			this.getCurrentPageData(pageIndex + 1);
			this.isHintStatus = 'loading';
		}
	},

	components: {
		DistributionHint
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.incomeDetail {
	height: 100vh;

	&-header {
		position: sticky;
		top: 0;
		// #ifdef H5
		top: calc(var(--status-bar-height) + var(--window-top));
		// #endif
		display: flex;
		align-items: center;
		background: #fff;
		width: 100%;
		height: 112rpx;
		padding: 0 20rpx;

		&-info {
			flex: 1;
			position: relative;

			height: 72rpx;
			background: #f6f6f6;
			border-radius: 20rpx;

			&-input {
				width: 100%;
				height: 72rpx;
				color: #333;
				font-size: 28rpx;
				line-height: 72rpx;
				padding: 0 70rpx 0 76rpx;

				/deep/ &-placeholder {
					font-size: 28rpx;
					font-weight: 400;
					color: #999;
					line-height: 72rpx;
				}
			}

			&-icon {
				width: 40rpx;
				height: 40rpx;

				position: absolute;
				top: 50%;
				left: 24rpx;
				transform: translateY(-50%);
			}

			&-clear {
				width: 48rpx;
				height: 48rpx;

				position: absolute;
				top: 0;
				right: 0;
				margin: 12rpx;
			}
		}

		&-cancel {
			width: 0;
			padding-right: 14rpx;
			overflow: hidden;
			font-size: 28rpx;
			font-weight: 400;
			color: #333;
			text-align: right;

			transition: width 0.3s;

			&.isShow {
				width: 104rpx;
			}

			text {
				width: 80rpx;
				display: inline-block;
			}
		}
	}

	&-main {
		@include Db_iosBottomDistance(32rpx);

		&-item {
			padding: 24rpx;
			margin: 20rpx 20rpx 0;

			background: #fff;
			border-radius: 24rpx;

			display: flex;
			align-items: center;

			&-info {
				flex: 1;

				font-size: 24rpx;
				font-weight: 400;

				> view {
					line-height: 34rpx;
					min-height: 34rpx;
				}

				&-name {
					color: #000;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					min-height: 40rpx;
				}

				&-time {
					color: #999;
					margin-top: 12rpx;
				}

				&-type {
					color: #333;
					margin-top: 12rpx;
				}
			}

			&-money {
				width: 156rpx;
				color: #57ae59;
				font-weight: bold;
				font-size: 28rpx;
				font-family: font-number;

				display: flex;

				justify-content: flex-end;
				align-items: baseline;

				&-icon {
					white-space: pre-wrap;
					margin-right: 4rpx;
				}
				&-num {
					font-size: 36rpx;
				}
			}
		}
	}

	&.skelett {
		.incomeDetail-main-item-info > view {
			background: $skelettBgColor;
			border-radius: 12rpx;

			text {
				visibility: hidden;
			}
		}
	}
}
</style>
